
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - Simple CRM</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-1">
    <div class="min-h-screen flex">
        <!-- Left Side - Branding -->
        <div class="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-blue-600 to-purple-700 relative overflow-hidden">
            <div class="absolute inset-0 bg-black opacity-20"></div>
            <div class="relative z-10 flex flex-col justify-center items-center text-white p-12"> 
                <div class="text-center">
                    <div class="w-24 h-24 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                    </div> 

                    <div class="mb-8">
                        <p class="text-lg opacity-80 mb-4">通过强大的数据分析和洞察管理您的业务</p>
                        <h1 class="text-4xl font-bold mb-4">欢迎使用 Simple CRM</h1>
                        <p class="text-xl opacity-90">新一代智能客户关系管理系统</p>
                    </div>
                </div>
            </div>
            <!-- Decorative elements -->
            <div class="absolute top-10 right-10 w-20 h-20 bg-white bg-opacity-10 rounded-full"></div>
            <div class="absolute bottom-10 left-10 w-16 h-16 bg-white bg-opacity-10 rounded-full"></div>
            <div class="absolute top-1/2 left-10 w-12 h-12 bg-white bg-opacity-10 rounded-full"></div>
        </div>

        <!-- Right Side - Login Form -->
        <div class="w-full lg:w-1/2 flex items-center justify-center p-8">
            <div class="w-full max-w-md">
                <!-- Logo for mobile -->
                <div class="lg:hidden text-center mb-8">
                    <h1 class="text-3xl font-bold text-gray-800">Simple CRM</h1>
                    <p class="text-gray-600 mt-2">登录您的账户</p>
                </div>

                <!-- Desktop header -->
                <div class="hidden lg:block mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">用户登录</h2>
                    <p class="text-gray-600">欢迎回来！请输入您的登录信息。</p>
                </div>

                <!-- Error/Success Messages -->
                <div x-data="{ show: false, message: '', type: 'error' }" 
                     x-show="show" 
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 transform scale-100"
                     x-transition:leave-end="opacity-0 transform scale-95"
                     class="mb-6">
                    <div :class="type === 'error' ? 'bg-red-50 border-red-200 text-red-800' : 'bg-green-50 border-green-200 text-green-800'" 
                         class="border rounded-lg p-4">
                        <div class="flex items-center">
                            <svg x-show="type === 'error'" class="w-5 h-5 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <svg x-show="type === 'success'" class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span x-text="message"></span>
                        </div>
                    </div>
                </div>

                <!-- Login Form -->
                <form x-data="loginForm()" @submit.prevent="submitForm" class="space-y-6">
                    <!-- Username Field -->
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名*</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                            </div>
                            <input type="text" 
                                   id="username" 
                                   x-model="formData.username"
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                                   placeholder="请输入您的用户名"
                                   required>
                        </div>
                    </div>

                    <!-- Password Field -->
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码*</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                            </div>
                            <input :type="showPassword ? 'text' : 'password'" 
                                   id="password" 
                                   x-model="formData.password"
                                   class="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                                   placeholder="请输入您的密码"
                                   required>
                            <button type="button" 
                                    @click="showPassword = !showPassword"
                                    class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <svg x-show="!showPassword" class="w-5 h-5 text-gray-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                                <svg x-show="showPassword" class="w-5 h-5 text-gray-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- Remember Me & Forgot Password -->
                    <div class="flex items-center justify-between">
                        <label class="flex items-center">
                            <input type="checkbox" 
                                   x-model="formData.remember"
                                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
                            <span class="ml-2 text-sm text-gray-600">保持登录状态</span>
                        </label>
                        <a href="#" class="text-sm text-blue-600 hover:text-blue-800 font-medium">忘记密码？</a>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" 
                            :disabled="loading"
                            class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
                        <span x-show="!loading">登录</span>
                        <span x-show="loading" class="flex items-center">
                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            登录中...
                        </span>
                    </button>
                </form>

                <!-- Additional Links -->
                <div class="mt-8 text-center">
                    <p class="text-sm text-gray-600">
                        还没有账户？ 
                        <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">立即注册</a>
                    </p>
                </div>

                <!-- Pro Members Notice -->
                <!-- <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <div class="flex items-center">
                        <i class="fas fa-crown text-yellow-500 mr-2"></i>
                        <span class="text-sm text-yellow-800">
                            <strong>专业版用户：</strong> 享受高级功能和优先技术支持。
                        </span>
                    </div>
                    <a href="#" class="text-sm text-yellow-700 hover:text-yellow-900 font-medium mt-1 inline-block">立即升级 →</a>
                </div> -->

                <!-- Footer -->
                <div class="mt-8 text-center text-sm text-gray-500">
                    <p>© 2024 Simple CRM. 保留所有权利。</p>
                    <div class="mt-2 space-x-4">
                        <a href="#" class="hover:text-gray-700">隐私政策</a>
                        <a href="#" class="hover:text-gray-700">服务条款</a>
                        <a href="#" class="hover:text-gray-700">联系客服</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function loginForm() {
            return {
                formData: {
                    username: '',
                    password: '',
                    remember: false
                },
                loading: false,
                showPassword: false,
                
                async submitForm() {
                    this.loading = true;
                    
                    try {
                        const response = await fetch('/api/v1/auth/login', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                username: this.formData.username,
                                password: this.formData.password
                            })
                        });
                        
                        const data = await response.json();
                        if (response.ok && data.code == 200) {
                            // Session已自动保存，无需手动存储
                            // Show success message
                            this.showMessage('登录成功，正在跳转...', 'success');
                            // Redirect to dashboard
                            setTimeout(() => {
                                window.location.href = '/dashboard';
                            }, 1000);

                        } else {
                            this.showMessage(data.message || '登录失败，请检查您的用户名和密码', 'error');
                        }
                    } catch (error) {
                        console.error('Login error:', error);
                        this.showMessage('网络错误，请稍后重试', 'error');
                    } finally {
                        this.loading = false;
                    }
                },
                
                showMessage(message, type) {
                    // Find the message component and update it
                    const messageEl = document.querySelector('[x-data*="show: false"]');
                    if (messageEl) {
                        const component = Alpine.$data(messageEl);
                        component.message = message;
                        component.type = type;
                        component.show = true;
                        
                        // Auto hide after 5 seconds
                        setTimeout(() => {
                            component.show = false;
                        }, 5000);
                    }
                },
                
                init() {
                    // Check if user is already logged in via session
                    fetch('/api/v1/auth/verify-session', {
                        credentials: 'include' // 包含cookies/session
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 200 && data.data.valid) {
                            window.location.href = '/dashboard';
                        }
                    })
                    .catch(() => {
                        // Session无效或网络错误，保持在登录页面
                    });
                }
            }
        }
    </script>
</body>
</html>